<template>
  <view class="container">
    <view class="notice">
      请确保支付宝账号属于所填身份，否则将打款失败
    </view>
    <view class="formLine">
      <view class="formLine-item">
        <view class="formLine-item-label">
          支付宝账号
        </view>
        <input type="text" class="ipt" placeholder="请输入支付宝账号" placeholder-class="styles" />
      </view>
      <view class="formLine-item">
        <view class="formLine-item-label">
          真实姓名
        </view>
        <input type="text" class="ipt" placeholder="请输入真实姓名" placeholder-class="styles" />
      </view>
      <view class="formLine-item">
        <view class="formLine-item-label">
          身份证号
        </view>
        <input type="text" class="ipt" placeholder="请输入身份证号" placeholder-class="styles" />
      </view>
      <view class="formLine-item">
        <view class="formLine-item-label">
          手机号
        </view>
        <input type="text" class="ipt" placeholder="请输入手机号" placeholder-class="styles" />
      </view>
      <view class="idCard">
        <view class="idCard-title">
          身份证照片
        </view>
        <view class="idCards">
          <UploadImg :width="300" :height="190" keyName="zheng" @getUrl="getUrl" uploadImg="/static/images/zheng2.png" />
          <UploadImg :width="300" :height="190" keyName="zheng" @getUrl="getUrl"
            uploadImg="/static/images/zheng.png" />
        </view>
      </view>
    </view>
    <view class="footer">
      <view class="agree">
        <image class="round_icon" src="../../static/images/round.png" mode=""></image>
        我已阅读并同意
        <text class="agree_label">《个人信息授权书》</text>
      </view>
      <view class="footer-btn" @click="onSubmit">
        确定提交
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {

      }
    },
    methods: {
      getUrl(e) {
        console.log("子组件传过来的", e);
        const {
          keyName,
          value
        } = e;
        this.params[keyName] = value;
      },
      onSubmit(){
        uni.navigateTo({
          url: "/pages/mine/extension"
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .footer{
    padding: 50rpx;
    box-sizing: border-box;
    position: fixed;
    width: 100%;
    bottom: 0;
    .agree{
      display: flex;
      align-items: center;
      font-weight: 400;
      font-size: 24rpx;
      color: #333333;
      justify-content: center;
      .round_icon{
        width: 28rpx;
        height: 28rpx;
        margin-right: 15rpx;
      }
      .agree_label{
        font-weight: 400;
        font-size: 24rpx;
        color: #EA7222;
      }
    }
    .footer-btn{
      background: linear-gradient( 270deg, #FF3C21 0%, #EA7222 100%);
      box-shadow: 0rpx 16rpx 20rpx 0rpx rgba(244,88,33,0.2);
      border-radius: 48rpx;
      width: 100%;
      height: 88rpx;
      text-align: center;
      line-height: 88rpx;
      font-weight: bold;
      font-size: 32rpx;
      color: #FFFFFF;
      margin-top: 68rpx;
    }
  }
  .idCard{
    padding: 30rpx 0;
    box-sizing: border-box;
    .idCard-title{
      font-weight: 400;
      font-size: 28rpx;
      color: #333333;
    }
    .idCards{
      display: flex;
      margin-top: 30rpx;
      justify-content: space-between;
      padding: 0 30rpx;
      box-sizing: border-box;
    }
  }
  .styles {
    font-weight: 400;
    font-size: 28rpx;
    color: #AAAAAA;
  }

  .container {
    width: 100vw;
    height: calc(100vh - 88rpx);
    background: #fff;

    .notice {
      font-weight: 400;
      font-size: 28rpx;
      color: #FDA620;
      height: 76rpx;
      background: #FFF3E0;
      width: 100%;
      text-align: center;
      line-height: 76rpx;
    }

    .formLine {
      padding: 0 30rpx;
      box-sizing: border-box;

      .formLine-item {
        display: flex;
        justify-content: space-between;
        height: 118rpx;
        align-items: center;
        border-bottom: 2rpx solid #eee;

        .formLine-item-label {
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
        }

        .ipt {
          font-weight: 400;
          font-size: 28rpx;
          color: #222;
          flex: 1;
          text-align: right;
        }
      }
    }
  }
</style>